<template>
  <section>
      <el-card>
        <el-table :data="MoudleData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column type="index" :index="indexMethod" sortable label="序号">
          </el-table-column>
          <el-table-column prop="name" label="名称" sortable>
          </el-table-column>
          <el-table-column prop="address" label="考试时间" :formatter="formatter">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="Check(scope.$index,scope.row)">查 看</el-button>
              <el-button size="mini" @click="Edit(scope.$index,scope.row)">编 辑</el-button>
              <el-button size="mini" type="danger" @click="Delete(scope.$index,scope.row)">删 除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <!-- 查看模块  -->
    <el-dialog title="查看模块页面" :visible.sync="CheckMoudle" width="80%" :before-close="handleClose">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="相关考点">
                <span>{{ props.row.name }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="模块名称" prop="id">
        </el-table-column>
        <el-table-column label="考试时间" prop="name">
        </el-table-column>
        <el-table-column label="相关课程" prop="desc">
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 编辑模块 -->
    <el-dialog title="编辑模块页面" :visible.sync="EditMoudle" width="80%" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="模块名称">
          <el-input type="text" placeholder="请输入模块名称"></el-input>
        </el-form-item>
        <el-form-item label="考试时间">
          <el-input-number type="text" placeholder="请输入考试时间"></el-input-number>
        </el-form-item>
        <el-form-item label="相关课程">
          <el-input type="text" placeholder="请输入相关课程"></el-input>
        </el-form-item>
        <el-form-item label="请选择考点">
          <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button type="primary" round>保 存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 增加模块 -->
    <el-dialog title="增加模块页面" :visible.sync="addMoudle" width="80%" :before-close="handleClose">
      <el-form label-width="100px">
        <el-form-item label="模块名称">
          <el-input type="text" placeholder="请输入模块名称"></el-input>
        </el-form-item>
        <el-form-item label="考试时间">
          <el-input-number type="text" placeholder="请输入考试时间"></el-input-number>
        </el-form-item>
        <el-form-item label="相关课程">
          <el-input type="text" placeholder="请输入相关课程"></el-input>
        </el-form-item>
        <el-form-item label="请选择考点">
          <el-select v-model="value" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button type="primary" round>保 存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
export default {
    mounted() {
        this.list = this.states.map(item => {
            return { value: item, label: item };
        });
    },
    data() {
        return {
            CheckMoudle: false,
            EditMoudle: false,
            addMoudle: false,
            options: [],
            value: [],
            list: [],
            loading: false,
            states: [
                "Alabama",
                "Alaska",
                "Arizona",
                "Arkansas",
                "California",
                "Colorado",
                "Connecticut",
                "Delaware",
                "Florida",
                "Georgia",
                "Hawaii",
                "Idaho",
                "Illinois",
                "Indiana",
                "Iowa",
                "Kansas",
                "Kentucky",
                "Louisiana",
                "Maine",
                "Maryland",
                "Massachusetts",
                "Michigan",
                "Minnesota",
                "Mississippi",
                "Missouri",
                "Montana",
                "Nebraska",
                "Nevada",
                "New Hampshire",
                "New Jersey",
                "New Mexico",
                "New York",
                "North Carolina",
                "North Dakota",
                "Ohio",
                "Oklahoma",
                "Oregon",
                "Pennsylvania",
                "Rhode Island",
                "South Carolina",
                "South Dakota",
                "Tennessee",
                "Texas",
                "Utah",
                "Vermont",
                "Virginia",
                "Washington",
                "West Virginia",
                "Wisconsin",
                "Wyoming"
            ],
            MoudleData: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                }
            ],
            tableData: []
        };
    },
    methods: {
        formatter(row, column) {
            return row.address;
        },
        indexMethod(index) {
            return index + 1;
        },
        Check() {
            this.CheckMoudle = true;
        },
        Edit() {
            this.EditMoudle = true;
        },
        Delete() {},
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        remoteMethod(query) {
            if (query !== "") {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.options = this.list.filter(item => {
                        return (
                            item.label
                                .toLowerCase()
                                .indexOf(query.toLowerCase()) > -1
                        );
                    });
                }, 200);
            } else {
                this.options = [];
            }
        },
        Add() {
            this.addMoudle = true;
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        }
    }
};
</script>

